<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>岗位管理</title>
    <meta name="description" content="">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="/resources/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/resources/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <script src="/resources/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/resources/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/resources/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href="/resources/css/app.css">
    <link rel="stylesheet" href="/resources/css/employee.type.css">
    <script src="/resources/js/jquery.min.js"></script>

</head>

<body data-type="widgets">
<script src="/resources/js/theme.js"></script>
<div class="am-g tpl-g">
    <%--头部开始--%>
    <%@include file="header.jsp" %>
    <%--头部结束--%>

    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">

        <div class="container-fluid am-cf">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                    <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 员工职位管理
                        <small>Post management</small>
                    </div>
                    <p class="page-header-description">本页面可以对员工的岗位级别进行添加管理</p>
                </div>
                <div class="am-u-lg-3 tpl-index-settings-button">
                    <button type="button" class="page-header-button"
                            data-am-modal="{target:'#type-model',width:600}"><span
                            class="am-icon-paint-brush">添加</span></button>
                </div>
            </div>

        </div>

        <div class="row-content am-cf">
            <div class="row widget  am-cf">
                <!--<div class="am-u-md-1  am-u-lg-2"></div>-->
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <table width="100%" class="am-table am-table-bordered am-table-compact tpl-table-black "
                           id="example-r">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>岗位名称</th>
                            <th>岗位说明</th>
                            <th>是否启用</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${pageInfo.list}" var="type" varStatus="i">
                        <tr>
                            <td>${i.index+1}</td>
                            <td>${type.typeName}</td>
                            <td>${type.typeInstruct}</td>
                            <td>
                                <c:if test="${type.state==1}">启用</c:if>
                                <c:if test="${type.state==0}">禁用</c:if>
                            </td>
                            <td>
                                <div class="tpl-table-black-operation">
                                    <c:if test="${type.emTypeId ==1}">
                                        <a class="am-btn-default table-action"> <i class="am-icon-warning"></i>不可操作 </a>
                                    </c:if>

                                    <c:if test="${type.emTypeId!=1}">
                                        <c:if test="${type.state ==1}">
                                            <a class="am-btn-warning table-action"
                                               href="javascript:updateState('${type.emTypeId}',0);"> <i
                                                    class="am-icon-warning"></i>禁用
                                            </a>
                                        </c:if>
                                        <c:if test="${type.state ==0}">
                                            <a class="am-btn-primary table-action"
                                               href="javascript:updateState('${type.emTypeId}',1);"> <i
                                                    class="am-icon-save"></i>启用 </a>
                                        </c:if>
                                        <a href="javascript:editType('${type.emTypeId}');">
                                            <i class="am-icon-pencil"></i> 编辑
                                        </a>
                                        <a class="tpl-table-black-operation-del table-del"
                                           href="javascript:delType('${type.emTypeId}');"><i class="am-icon-trash"></i>
                                            删除
                                        </a>
                                        <a class="tpl-table-black-operation-del table-del"
                                           href="javascript:getPromission('${type.emTypeId}','${type.typeInstruct}');"><i
                                                class="am-icon-trash"></i>
                                            查看权限
                                        </a>
                                    </c:if>
                                </div>
                            </td>
                        </tr>

                        </c:forEach>

                    </table>

                </div>
                <!--分页插件Start-->
                <div class="am-u-lg-12 am-cf paging">

                    <!-- 分页文字信息，其中分页信息都封装在pageInfo中 -->
                    <div class="col-md-6">
                        当前第：${pageInfo.pageNum }页，总共：${pageInfo.pages }页，总共：${pageInfo.total }条记录
                    </div>
                    <div class="am-fr">
                        <ul class="am-pagination tpl-pagination">
                            <!-- 首页 -->
                            <li><a href="/u/type?p=1">首页</a></li>
                            <!-- 上一页 -->
                            <c:if test="${pageInfo.hasPreviousPage }">
                                <li>
                                    <a href="/u/type?pn=${pageInfo.pageNum-1 }" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                            </c:if>
                            <!-- 循环遍历连续显示的页面，若是当前页就高亮显示，并且没有链接 -->
                            <c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
                                <c:if test="${page_Num == pageInfo.pageNum }">
                                    <li class="am-active"><a href="/u/type?p=${page_Num }">${page_Num }</a></li>
                                </c:if>
                                <c:if test="${page_Num != pageInfo.pageNum }">
                                    <li><a href="/u/type?p=${page_Num }">${page_Num }</a></li>
                                </c:if>
                            </c:forEach>
                            <!-- 下一页 -->
                            <c:if test="${pageInfo.hasNextPage }">
                                <li>
                                    <a href="/u/type?pn=${pageInfo.pageNum+1 }" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </c:if>
                            <!-- 末页 -->
                            <li><a href="/u/type?p=${pageInfo.pages }">末页</a></li>
                        </ul>
                    </div>
                </div>
                <!--分页插件end-->
                <%--</div>--%>

            </div>
        </div>
    </div>
</div>

<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-hd"><h3>删除提醒，请慎重操作</h3></div>
        <div class="am-modal-bd">
            你删除以后数据不可恢复，可能会导致部分员工使用异常，确定要删除这条记录吗？
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>

<div class="am-modal tpl-am-model-bd" id="type-model">
    <div class="am-modal-dialog">
        <div class="am-modal-hd row">
            <h2>添加岗位</h2><a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <%--<form action="/u/type" method="post">--%>
        <input type="hidden" id="emTypeId">
        <div class="am-u-sm-3 am-u-lg-2">名称</div>
        <div class="am-u-sm-9  am-u-lg-10 modal-input-div">
            <input type="text" id="typeName" name="typeName" placeholder="请输入英文字母" class="am-form-field" required>
        </div>
        <%--<small id="nameMsg"></small>--%>


        <div class="am-u-sm-3 am-u-lg-2">岗位介绍</div>
        <div class="am-u-sm-9 am-u-lg-10 modal-input-div">
            <input type="text" id="typeInstruct" name="typeInstruct" placeholder="请输入汉字" class="am-form-field"
                   required/>
        </div>
        <button type="button" id="addBtn" class=" am-u-md-12  am-btn am-btn-primary" style="margin-top: 10px">添加
        </button>
    </div>
</div>

<div class="am-modal tpl-am-model-bd" id="pro-type-model">
    <div class="am-modal-dialog">
        <div class="am-modal-hd row">
            <h2>岗位权限管理</h2><a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <%--<form action="/u/type" method="post">--%>
        <input type="hidden" id="emTypeId">
        <div class="am-u-sm-3 am-u-lg-2">岗位名称</div>
        <div class="am-u-sm-9  am-u-lg-10 modal-input-div">
            <input type="text" id="typeNamepro" name="typeName" class="am-form-field" readonly>
        </div>
        <%--<small id="nameMsg"></small>--%>


        <div class="am-u-sm-12 am-u-lg-12">权限介绍</div>
        <%--<div class="am-u-sm-12 am-u-lg-12 modal-input-div">--%>
        <table class="am-u-sm-12 am-u-lg-12 am-table am-table-bordered am-table-compact tpl-table-black"
               id="typePromenu">
            <tr>
                <td>
                    菜单名
                </td>
                <td>菜单等级</td>
                <td>
                    操作
                </td>
            </tr>
            <tr><td>用户管理</td><td>一级菜单</td><td><a href="#">删除该岗位权限</a></td></tr>
        </table>
        <%--</div>--%>
        <%--<button type="button" id="addBtnpro" class=" am-u-md-12  am-btn am-btn-primary" style="margin-top: 10px">添加--%>
        <%--</button>--%>
    </div>
</div>


<script src="/resources/js/amazeui.min.js"></script>
<script src="/resources/js/amazeui.datatables.min.js"></script>
<script src="/resources/js/dataTables.responsive.min.js"></script>
<script src="/resources/js/app.js"></script>
<script src="/resources/js/employee-type.js"></script>
<script>
    function getPromission(etid,name) {
        var modal = $('#pro-type-model');
        console.log(etid);
        var formData = new FormData();
        formData.append('eid', etid);
        //更改为查询sysRolerMenu的查询链接
        var url = "/pro/SelectSysRole";
        $.ajax({
            url: url,
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false
        }).done(function (res) {
            if (res === null || res === undefined || res === '') {
                alert("服务器内部错误");
                return;
            }
            console.log(res);
            var ptable = $("#typePromenu");
            ptable.empty();
            $("#typeNamepro").val(name);
            var trString ='';
            for (var i = 0; i < res.length; i++) {
                var menuleve ='二级菜单';
                if (res[i].parentId == 0){
                    menuleve='一级菜单';
                }
          //      /u/del?eid='+etid+'&&menudi='+res[i].sysMenu.id+'
                //href="/u/del?id='+etid+'&&menudi='+res[i].sysMenu.id+'"更改sysrolerMenu的删除链接

                trString+='<tr><td>'+res[i].sysMenu.name+'</td><td>'+menuleve+'</td><td><a href="javascript:delRoleMenu('+etid+','+res[i].sysMenu.id+')">删除该岗位权限</a></td></tr>';
            }
            ptable.append(trString);
        }).fail(function (res) {
            console.log(res);
            alert("网络异常")

        });
        modal.modal({target: '#pro-type-model', width: 800});
    }

    function delRoleMenu(etid,sysMenuID) {
        var url ="/pro/DelectRoleMenu";
        var formdata = new FormData();
        formdata.append("eid",etid);
        formdata.append("menuId",sysMenuID);
        $.ajax({
            url: url,
            type: 'POST',
            cache: false,
            data: formdata,
            processData: false,
            contentType: false
        }).done(function (res) {
            window.window.location.reload();
            alert(res.data);
        }).fail(function () {
            alert('网络出问题了，请刷新重试');
        });
    }
</script>

</body>

</html>
